<template>
  <div class="item" @click="goToDetail" ref="item">
    <img v-if="name==='recommendList'" :src="goodsItem.image"/>
    <img v-else :src="goodsItem.show.img"/>
    <p>{{ goodsItem.title }}</p>
    <div class="goods-info">
      <span class="price">￥{{ goodsItem.price }}</span>
      <img src="~assets/img/common/collect.svg" alt="" />
      <span class="collect">{{ goodsItem.cfav }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsListItem",
  components: {},
  props: {
    goodsItem: {
      type: Object,
      default: {},
    },
    list:{
      type: Number
    },
    name:{
      type: String,
      default:"0"
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.$refs.item.style.width=95/this.list+`vw`;
    this.$refs.item.style.height=180/this.list+`vw`;
  },
  created(){
    
  },
  methods: {
    goToDetail: function () {
      // 1.获取iid
      let iid = this.goodsItem.iid;
      if (!iid) {
        return
      }else{
        this.$router.push({ path: "/detail", query: { iid } });
      }
      // 2.跳转到详情页面
      
    },
  },
};
</script>

<style lang="css" scoped>
.item {
  width: 45%;
  margin: 0 auto 0 auto;
  height: 85vw;
  display: flex;
  flex-direction: column;
}
.item > img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  margin-bottom: 5px;
}
.goods-info {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
p {
  font-size: 14px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.goods-info > img {
  width: 14px;
}
.price {
  font-size: 14px;
  margin-right: 10px;
}
.collect {
  font-size: 14px;
}
</style>